<script lang="ts" setup>
import { computed } from 'vue'
import type { PropType } from 'vue'
import type { JobItemDto } from '@/api/job/type'

const props = defineProps({
    waterFullItem: {
        type: Object satisfies PropType<JobItemDto>,
        default: () => ({}),
    },
})

const emits = defineEmits(['click'])

/**
 * 取工作详情的前四条
 */
const detailList = computed(() => {
    const jobDetail = props.waterFullItem?.jobDetailList || []
    return jobDetail.filter((i: JobItemDto, index: number) => index < 4)
})

/**
 * 取工作标签的前两个
 */
const jobTagList = computed(() => {
    const jobTag = props.waterFullItem?.jobTagList || []
    return jobTag.filter((i: JobItemDto, index: number) => index <= 1)
})

function onClick() {
    emits('click', props.waterFullItem)
}
</script>

<template>
    <view @click="onClick">
        <view v-if="!waterFullItem.params?.file" class="box-border border border-#f4f4f7 rounded-xl border-solid px-16rpx py-30rpx text-xs text-#202536">
            <view class="text-26rpx font-bold">
                {{ waterFullItem.jobName }}
            </view>
            <view class="mb-24rpx mt-12rpx text-33rpx text-orange font-bold">
                {{ waterFullItem.salary }} {{ waterFullItem.jobSalaryType }}
            </view>
            <view v-for="(item, index) in detailList" :key="index" class="my-10rpx flex items-center">
                <view
                    class="relative line-clamp-2 line-height-normal before:mr-10rpx before:inline-block before:h-8rpx before:w-8rpx before:rounded-full before:bg-#9497B1 before:align-middle before:content-empty before:-mt-5rpx">
                    {{ item }}
                </view>
            </view>
            <view v-if="waterFullItem?.jobDetail?.length > 4">...</view>
        </view>
        <image v-if="waterFullItem.params?.file?.[0]?.fileUrl && waterFullItem.params?.file?.[0]?.fileType !== 'video'"
               :src="waterFullItem.params?.file?.[0]?.fileUrl" mode="widthFix" class="w-full rounded-lg"
               :class="{ 'brightness-50': !waterFullItem.jobState }" />
        <video v-if="waterFullItem.params?.file?.[0]?.fileType === 'video'"
               :id="`video${waterFullItem.params.file[0].id}`" :show-center-play-btn="false" :show-play-btn="false"
               :show-fullscreen-btn="false" :src="waterFullItem.params.file[0].fileUrl" class="w-full rounded-lg"
               :class="{ 'brightness-50': !waterFullItem.jobState }" />
        <view class="box-border p-16rpx text-xs text-#202536 !pb-0">{{ waterFullItem.jobName }}</view>
        <view class="box-border flex items-center justify-between p-16rpx text-xs !pt-8rpx">
            <view class="flex flex-wrap items-center">
                <view v-for="(item, idx) in jobTagList" :key="idx"
                      class="mb-10rpx mr-12rpx rounded-lg bg-#f4f4f7 px-8rpx py-12rpx text-#565868">
                    {{ item }}
                </view>
            </view>
        </view>
    </view>
</template>
